.gka-wrap {
    width: 400px;
    height: 300px;
}

.animation {
    width: 400px;
    height: 300px;
    background-image: url("./img/b_a10.png");
    background-size: 400px 300px;
    background-repeat: no-repeat;
    animation-name: keyframes-b;
    animation-duration: 0.44s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-timing-function: steps(1);
}

@keyframes keyframes-b {
    0% {
        width: 400px;
        height: 300px;
        background-image: url("./img/b_a10.png");
        background-size: 400px 300px;
    }
    9.09% {
        background-image: url("./img/b_a11.png");
    }
    18.18% {
        background-image: url("./img/b_a12.png");
    }
    27.27% {
        background-image: url("./img/b_a13.png");
    }
    36.36% {
        background-image: url("./img/b_a14.png");
    }
    45.45% {
        background-image: url("./img/b_a15.png");
    }
    54.55% {
        background-image: url("./img/b_a16.png");
    }
    63.64% {
        background-image: url("./img/b_a17.png");
    }
    72.73% {
        background-image: url("./img/b_a18.png");
    }
    81.82% {
        background-image: url("./img/b_a19.png");
    }
    90.91%,
    100% {
        background-image: url("./img/b_a20.png");
    }
}